<link rel="stylesheet" href="<?php echo ROOT_URL; ?>public/jRating/jRating.jquery.css" type="text/css" />
<script type="text/javascript" src="<?php echo ROOT_URL; ?>public/jRating/jRating.jquery.js"></script>

<link href="<?php echo ROOT_URL; ?>public/upload/uploadfile.css" rel="stylesheet">
<script src="<?php echo ROOT_URL; ?>public/upload/jquery.uploadfile.min.js"></script>
<script src="<?php echo ROOT_URL; ?>public/upload/jquery.uploadvideo.min.js"></script>

<link href="<?php echo ROOT_URL; ?>public/load/cog.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="<?php echo ROOT_URL; ?>public/load/html5.js"></script>
<![endif]-->


<style type="text/css">
    .extracted_url {
        min-height:100px;
    }

    .remove_thumbnail, .removeUploadImages{
        position: absolute;
        top: 0;
        right: 0;
        color: #ccc;
        cursor: pointer;
    }

    .remove_thumbnail:hover{
        color: #e74c3c;
    }

    .extracted_thumb {
        float: left;
        margin-right: 10px;
    }

    #loading_indicator{
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 8px;
        display:none;
    }
    #results{
        display:none;
    }
    a:link {
        color: #0066CC;
    }
    .thumb_sel {
        float: left;
        height: 22px;
        width: 55px;
    }
    .thumb_sel .prev_thumb {
        background: url(<?php echo ROOT_URL; ?>public/images/thumb_selection.gif) no-repeat -50px 0;
        float: left;
        width: 26px;
        height: 22px;
        cursor: pointer;
    }
    .thumb_sel .prev_thumb:hover {
        background: url(<?php echo ROOT_URL; ?>public/images/thumb_selection.gif) no-repeat 0 0;
    }
    .thumb_sel .next_thumb {
        background: url(<?php echo ROOT_URL; ?>public/images/thumb_selection.gif) no-repeat -76px 0;
        float: left;
        width: 24px;
        height: 22px;
        cursor: pointer;
    }
    .thumb_sel .next_thumb:hover {
        background: url(<?php echo ROOT_URL; ?>public/images/thumb_selection.gif) no-repeat -26px 0;
    }
    .small_text{
        font-size: 10px;
    }


    /**Campaign tag*/
    #campaign_tag{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .4);
        z-index: 99999;
    }

    .campaign_tag{
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width: 500px;
        background: #fff;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        z-index: 9999999999;
    }

    .campaign_tag_header{
        padding-left: 20px;
    }

    .campaign_tag .close_campaign_tag{
        position: absolute;
        top: 5px;
        right: 10px;
        color: #ccc;
        font-size: 16px;
        cursor: pointer;
    }

    .campaign_tag .rating-item{
        display: table;
        table-layout: fixed;
        border-bottom: 1px solid #ddd;
        width: 100%;
        padding: 10px 0;
    }

    .campaign_tag .rating-item .text{
        display: table-cell;
        width: 150px;
        padding-left: 20px;
    }

    .campaign_tag .rating-item .rate{
        display: table-cell;
    }
</style>


<script type="text/javascript">

    $(document).ready(function () {
        var settings = {
            url: "<?php echo ROOT_URL; ?>public/upload/upload2.php",
            method: "POST",
            fileName: "myfile",
            multiple: true,
            showPreview: true,
            previewWidth: 80,
            previewHeight: 80,
            onSuccess:function(files,data,xhr)
            {
                $('#upload-plugin').find('.progress-bar-upload').hide();

                /*$.each(files, function (data, xhr) {
                    $.ajax({
                        type:"POST",
                        url:"admin/uploadImage",
                        dataType    : 'json',
                        data:{'image': files[0]},
                        success:(function(data){
                            if(data.status == "ok"){
                                var library = $('.library-image');
                                library.html("");
                                for(var i =0; i<data.media.length; i++){
                                    var tid = data.media[i].tid;
                                    var iid = data.media[i].iid;
                                    var name = data.media[i].name;
                                    var title = data.media[i].title;
                                    var caption = data.media[i].caption;
                                    var alt = data.media[i].alt;
                                    var description = data.media[i].description;
                                    library.append($('<div onclick="imageClick(this)" iid="'+iid+'" class="img-item" caption = "'+caption+'" description = "'+description+'"><div class="centered"><img title="'+title+'" alt="'+alt+'"  src="upload/images/'+name+'"></div></div>'))
                                }

                                $('#info-image').find('img').attr('src','upload/images/'+files+'');
                            }
                        })
                    });
                });*/

            },
            onError: function(files,status,errMsg)
            {
            }
        };
        var uploadObj = $("#file-upload").uploadFile(settings);


       /* var settingVideo = {
            url: "<?php echo ROOT_URL; ?>public/upload/upload2.php",
            method: "POST",
            fileName: "myfile",
            multiple: true,
            showPreview: true,
            previewWidth: 80,
            previewHeight: 80,
            onSuccess:function(files,data,xhr)
            {
                $('#upload-plugin').find('.progress-bar-upload').hide();
            },
            onError: function(files,status,errMsg)
            {
            }
        };
        var uploadObjVideo = $("#file-upload-video").uploadFileVideo(settingVideo);*/
    });

</script>

<link rel="stylesheet" href="<?php echo ROOT_URL; ?>public/css/analytics.css"/>

<script src="<?php echo ROOT_URL; ?>public/highchart/highcharts.js"></script>
<script src="<?php echo ROOT_URL; ?>public/highchart/data.js"></script>
<script src="<?php echo ROOT_URL; ?>public/highchart/drilldown.js"></script>

<div id="container">
    <div class="campaign-content">

    <!-- Khung bình luận--->
        <div class="post-comment" cid="<?php echo $cid; ?>">
            <div class="post-comment-header">
                <span class="post-comment-title-icon"></span>
                <label class="post-comment-title-text">VIẾT BÀI BÌNH LUẬN</label>
                <ul>
                    <li class="post-comment-header-border">
                        <span class="post-comment-add-photo-icon"></span>
                        <label id="add-photo">Add Photo</label>
                    </li>
                    <li class="post-comment-header-border">
                        <span class="post-comment-add-video-icon"></span>
                        <label id="add-video">Add Video</label>
                    </li>
                    <li>
                        <div class="rating" data-average="10" data-id="4"></div>
                    </li>
                </ul>
            </div>
            <div class="post-comment-body">
                <div style="margin: 10px; border-top: 1px solid #bdc7d8;">
                    <div class="post-comment-body-top">
                        <textarea id="wrp-comment" placeholder="Viết bình luận"></textarea>
                        <img id="loading_indicator" src="<?php echo ROOT_URL; ?>public/images/ajax-loader.gif">
                    </div>
                    <div class="post-comment-media">

                        <!-- Thumbnail khi chèn link có hình ảnh-->
                        <div class="extracted_url" hidden="hidden">
                            <span class="remove_thumbnail"><i class="fa fa-times" onclick="removeThumbnail(this);"></i></span>
                            <div class="extracted_thumb" id="extracted_thumb">
                                <img src="" width="100" height="100">
                            </div>
                            <div class="extracted_content">
                                <h4><a href="http://vnexpress.net/" target="_blank">Tin nhanh VnExpress - Đọc báo, tin tức online 24h</a></h4>
                                <p>Trang chủ &nbsp; Thời sự  &nbsp; Góc nhìn  &nbsp; Thế giới   </p>
                                <div class="thumb_sel">
                                    <span class="prev_thumb" id="thumb_prev">&nbsp;</span>
                                    <span class="next_thumb" id="thumb_next">&nbsp;</span>
                                </div>
                                <span class="small_text" id="total_imgs">116 of 121</span>
                                <span class="small_text"></span>
                            </div>
                        </div>

                        <!-- Hình ảnh hoặc video upload-->
                        <div class="post-comment-media-upload" hidden="hidden">
                            <span class="removeUploadImages"><i class="fa fa-times" onclick="removeUploadImages(this);"></i></span>
                            <ul id="upload-plugin">
                                <!--<li>
                                    <img src="<?php /*echo ROOT_URL; */?>upload/avatar/c2.png">
                                    <i class="fa fa-times"></i>
                                </li>-->
                                <li>
                                    <div id="file-upload"><i class="fa fa-plus"></i></div>
                                </li>
                            </ul>
                        </div>

                        <!--Video-->
                        <!--<div class="post-comment-video-upload">
                            <div id="file-upload-video"></div>
                            <video width="400px" controls>
                                <source src="" type="video/mp4">
                            </video>
                        </div>-->

                    </div>
                </div>
            </div>
            <div class="post-comment-footer">
                <div style="padding: 10px">
                    <label style="color: #062e7e;">Chia sẻ bài viết trên</label>
                    <span style="margin-left: 30px">
                        <input id="facebook_share_icon" checked type="checkbox">
                        <label for="facebook_share_icon" class="icon-small facebook-icon">
                            <i class="fa fa-facebook"></i>
                        </label>
                    </span>
                    <span style="margin-left: 10px">
                        <input id="twitter_share_icon" type="checkbox">
                        <label for="twitter_share_icon" class="icon-small twitter-icon">
                            <i class="fa fa-twitter"></i>
                        </label>
                    </span>
                    <span style="margin-left: 10px">
                        <input id="google_share_icon" type="checkbox">
                        <label for="google_share_icon" class="icon-small google-icon">
                            <i class="fa fa-google-plus"></i>
                        </label>
                    </span>
                    <label style="margin-left: 10px">(Bạn sẽ được cộng thêm 1 điểm)</label>
                    <input type="button" id="post-comment" class="btn" value="Bình luận">
                </div>
            </div>
        </div>

        <!-- Khung nội dung comment-->
        <div  class="campaign-comment" style="min-height: 200px">

        </div>

        <!-- Analytic -->
        <div style="display: none" class="campaign-analytic">

        </div>

        <div id="campaign_tag">
            <div class="campaign_tag">
                <span class="close_campaign_tag">
                    <i class="fa fa-times"></i>
                </span>
                <div class="campaign_tag_header">
                    <h1>Đánh giá</h1>
                </div>
                <div class="rating-item">
                    <div class="text">Tổng thể</div>
                    <div class="rate">
                        <div class="rating"></div>
                    </div>
                </div>
                <div class="rating-item">
                    <div class="text">Các thuộc tính của sản phẩm</div>
                </div>
                <div class="rating-item">
                    <div class="text">Chất lượng</div>
                    <div class="rate">
                        <div class="rating"></div>
                    </div>
                </div>
                <div class="rating-item">
                    <div class="text">Kiểu dáng</div>
                    <div class="rate">
                        <div class="rating"></div>
                    </div>
                </div>
                <div class="rating-item">
                    <div class="text">Giá</div>
                    <div class="rate">
                        <div class="rating"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    $(function () {

        var body = $('body');

        //loading comment
        $.ajax({
            type:"POST",
            url:Root_url+"campaign/getComment",
            data:{},
            success:(function(data){
                $('.campaign-comment').html(data);
            })
        });

        //load analytics
        $.ajax({
            type:"POST",
            url:Root_url+"campaign/getAnalytics",
            data:{},
            success:(function(data){
                $('.campaign-analytic').html(data);
            })
        });

        //Sự kiện rating campaign
        $(".rating").jRating({
            onSuccess : function(element,rate){
                $('.rating').attr("rate",rate);
                //Lưu rating của user vô cơ sở dữ liệu
                $.ajax({
                    type:"POST",
                    url: Root_url+"campaign/addOverallRating",
                    dataType: "json",
                    data:{'rating': rate},
                    success:(function(data){

                    })
                });

                //Sau khi đánh giá, sẽ hiện ra đánh giá các tag con
                var campaign_tag = $('#campaign_tag');
                campaign_tag.show("drop", {
                    direction: "up"
                });
            }
        });

        //Close rating tag
        body.on('click', '.close_campaign_tag', function(){
            var campaign_tag = $('#campaign_tag');
            campaign_tag.hide("drop", {
                direction: "up"
            });
        });

        var wrp_comment = $('#wrp-comment');
        wrp_comment.autosize();

        //Sự kiện chèn link vô comment box
        window.extract_url = false;
        //Extract url images
        if(!window.extract_url){
            wrp_comment.keyup(function() { //user types url in text field
                //url to match in the text field
                var match_url = /\b(https?):\/\/([\-A-Z0-9.]+)(\/[\-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i;

                //returns true and continue if matched url is found in text field
                if (match_url.test(wrp_comment.val())) {
                    $("#loading_indicator").show(); //show loading indicator image

                    var extracted_url = wrp_comment.val().match(match_url)[0]; //extracted first url from text filed

                    //ajax request to be sent to extract-process.php
                    $.post('extract',{'url': extracted_url}, function(data){

                        extracted_images = data.images;
                        total_images = parseInt(data.images.length-1);
                        img_arr_pos = total_images;

                        if(total_images>0){
                            //inc_image = '<div class="extracted_thumb" id="extracted_thumb"><img src="'+data.images[img_arr_pos]+'" width="100" height="100"></div>';
                            var extracted_thumb = $('#extracted_thumb');
                            extracted_thumb.html('<img src="'+data.images[img_arr_pos]+'" width="100" height="100">');
                        }else{
                            //inc_image ='';
                        }
                        //content to be loaded in #results element
                        //var content = '<div class="extracted_url">'+ inc_image +'<div class="extracted_content"><h4><a href="'+extracted_url+'" target="_blank">'+data.title+'</a></h4><p>'+data.content+'</p><div class="thumb_sel"><span class="prev_thumb" id="thumb_prev">&nbsp;</span><span class="next_thumb" id="thumb_next">&nbsp;</span> </div><span class="small_text" id="total_imgs">'+img_arr_pos+' of '+total_images+'</span><span class="small_text">&nbsp;&nbsp;Choose a Thumbnail</span></div></div>';

                        var extracted_content = $('.extracted_content');
                        extracted_content.find('h4').html('<a href="'+extracted_url+'" target="_blank">'+data.title+'</a>');
                        extracted_content.find('p').html(data.content);
                        var total_imgs = $('#total_imgs');
                        total_imgs.html(img_arr_pos+' of '+total_images);

                        //load results in the element
                        $('.post-comment-media').show();
                        $(".extracted_url").show(); //append received data into the element
                        $("#loading_indicator").hide(); //hide loading indicator image

                    },'json');
                }
            });
        }

        body.on('click', '#add-photo', function(){
            $($('.ajax-file-upload').find('form').get(0)).find('input').click();
            $('.post-comment-media').show();
            $('#extracted_url').hide();
            $('.post-comment-media-upload').show();
        });

        body.on('click', '#add-video', function(){
            $($('.ajax-file-upload').find('form').get(0)).find('input').click();
        });

        body.on('click', '#post-comment', function(){
            var cid = $('.post-comment').attr('cid');
            var text = $('#wrp-comment');
            if(text.val() == ""){
                text.effect('highlight', {color: 'rgb(255, 182, 193)'}, 500);
                text.focus();
            }else{
                var loading = $('#loading_indicator');
                loading.show();
                var rating = $('.rating').attr('rate');
                var comment = text.val();
                //Kiểm tra có upload ảnh không?

                //Kiểm tra có upload video không?

                //Kiểm tra có link thumbnail không?

                //Bình luận
                var parentCommentId = "";

                $.ajax({
                    type:"POST",
                    url: Root_url+"campaign/addComment",
                    dataType: "json",
                    data:{'cid': cid, 'text': comment, 'parent': 0},
                    success:(function(data){
                        if(data.status == "ok"){
                            loading.hide();
                        }
                    })
                });


            }
        });

        //user clicks previous thumbail
        body.on("click","#thumb_prev", function(e){
            if(img_arr_pos>0)
            {
                img_arr_pos--; //thmubnail array position decrement

                //replace with new thumbnail
                $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">');

                //show thmubnail position
                $("#total_imgs").html((img_arr_pos) +' of '+ total_images);
            }
        });

        //user clicks next thumbail
        body.on("click","#thumb_next", function(e){
            if(img_arr_pos<total_images)
            {
                img_arr_pos++; //thmubnail array position increment

                //replace with new thumbnail
                $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">');

                //replace thmubnail position text
                $("#total_imgs").html((img_arr_pos) +' of '+ total_images);
            }
        });

        //Campaign and analytics
        //Bình luận
        body.on('click', '.flatform', function(){
            $('.post-comment').show();
            $('.campaign-comment').show();
            $('.campaign-analytic').hide();

            $.ajax({
                type:"POST",
                url:Root_url+"campaign/getComment",
                data:{},
                success:(function(data){
                    $('.campaign-comment').html(data);
                })
            });
        });

        //Thống kê
        body.on('click', '.dateRange', function(){
            $('.post-comment').hide();
            $('.campaign-comment').hide();
            $('.campaign-analytic').show();

            $.ajax({
                type:"POST",
                url:Root_url+"campaign/getAnalytics",
                data:{},
                success:(function(data){
                    $('.campaign-analytic').html(data);
                })
            });
        });

    });

    function removeThumbnail(obj){
        obj = $(obj);
        $('.post-comment-media').hide();
    }

    function removeUploadImages(obj){
        obj = $(obj);
        $('.post-comment-media').hide();
        //Remove images upload
    }
</script>